<script setup lang="ts">
import {reactive, computed, StyleValue} from 'vue';
import {useRouter} from 'vue-router';
import appIcon from '@renderer/assets/img/app-logo.png'
import appIconWhite from '@renderer/assets/img/app-logo-white.png'

const router = useRouter()

const titleStyle = reactive({
  normalLogo: {
    backgroundColor: '',
    logo: appIcon,
    showLogo: true,
    titleColor: ''
  },
  normalNoLogo: {
    backgroundColor: '',
    logo: appIcon,
    showLogo: false,
    titleColor: ''
  },
  transparent: {
    backgroundColor: 'transparent',
    logo: appIconWhite,
    showLogo: true,
    titleColor: 'white'
  }
})

const currentTitleStyle = computed(() => {
  return titleStyle[props.modelValue]
})

const backHome = () => {
  router.push({path: '/'})
}

const props = defineProps({
  modelValue: {
    type: String,
    required: true,
    default: 'normalLogo'
  },
  floatMode: {//悬浮模式
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <div class="title-layout hor-layout-side-center" :class="{'float-mode':floatMode}"
       :style="{ backgroundColor: currentTitleStyle.backgroundColor }">
    <div class="hor-layout-center">
      <img v-if="currentTitleStyle.showLogo" class="app-logo" :src="currentTitleStyle.logo">
      <div class="title-view" :style="{ color: currentTitleStyle.titleColor }">ADB自助授权平台安装</div>
    </div>
    <img class="close-icon" src="../../../assets/img/close-icon.png" @click="backHome">
  </div>
</template>

<style lang="less">
.title-layout {
  width: calc(100% - 15 * 2px);
  // background-color: #f0f0f0;
  padding: 15px;
  font-size: 18px;

  .app-logo {
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }

  .title-view {
    color: black;
  }

  .close-icon {
    width: 20px;
    height: 20px;
  }
}

.title-layout.float-mode {
  position: fixed;
  top: 0px;
}
</style>
